<template>
    <div class="index">
        <el-container>
            <el-aside>
                <!-- 侧边栏 -->
                <el-menu
                        background-color="#001529"
                        text-color="#a6aaae"
                        active-text-color="#fff"
                        router
                        class="el-menu-vertical-demo"
                        :default-active="$router.history.current.path"
                        :collapse="isCollapse"
                >
                    <div class="logo">{{!isCollapse?'管理系统':'M'}}</div>
                    <aside-item v-for="item in menuLists" :key="item.url" :item="item"></aside-item>
                </el-menu>
            </el-aside>
            <el-container>
                <!-- 头部 -->
                <el-header>
                    <div class="isCollapse">
                        <i
                                :class="[!isCollapse?'el-icon-s-fold':'el-icon-s-unfold']"
                                @click="isCollapse=!isCollapse"
                        ></i>
                    </div>
                    <div class="userInfo">
                        <el-avatar src="https://dev-file.iviewui.com/avatar_default/avatar"></el-avatar>
                        <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                {{this.username}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="informationUser">用户信息</el-dropdown-item>
                                <el-dropdown-item command="loginOut" divided>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <!-- 项目主内容 -->
                <el-main>
                    <el-scrollbar style="height:100%">
                        <transition name="main">
                            <router-view></router-view>
                        </transition>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import asideItem from "../components/asideItem"; //递归组件，渲染侧边栏
    import {listall} from "../api/bishe/baoxiu";

    export default {
        created() {
            this.baoxiuadd()
            this.timer()
        },
        computed: {
            menuLists() {
                return this.$store.state.menuLists
            }
        },
        components: {
            asideItem
        },
        inject:['reload'],
        data() {
            return {
                username: this.$route.query.name,
                password: this.$route.query.password,
                isCollapse: false,
                baoxiucount: 0,
                baoxiudata: []
            };
        },
        methods: {
            handleCommand(command) {
                if (command == 'loginOut') {
                    this.$router.push('/login')
                } else if (command === 'informationUser') {
                    this.$router.push({path: '/userinfo', query: {name: this.username}})
                }
            },
            baoxiuadd() {
                var count = this.baoxiucount;
                var number=0;
                listall()
                    .then(res => {
                        console.log(res);
                        this.baoxiudata = res.data.items;
                        for (const baoxiu of this.baoxiudata) {
                            if (baoxiu.remark === '未处理') {
                                number++;
                            }
                        }
                        console.log(number)
                        console.log(count)
                        if (number>count){
                            this.$notify({
                                title: '警告',
                                message: '您有' + number + '报修消息未处理',
                                type: 'warning',
                                duration: 0
                            });
                            this.baoxiucount=number;
                        }
                    })
            },
            timer() {
                return setInterval(() => {
                    this.baoxiuadd()
                }, 5000)
            }
        },
        destroyed() {
            clearInterval(this.timer)
        }
    };
</script>

<style lang='less' scoped>
    .hide {
        width: 40px !important;
    }

    .index {
        width: 100%;
        height: 100%;

        .el-aside {
            background-color: #001529;
            overflow: hidden;
            box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
            z-index: 999;
            background-image: url("../assets/images/build.svg");
            background-size: contain;
            background-repeat: no-repeat;
            background-position-y: bottom;
        }

        .logo {
            font-size: 25px;
            font-weight: bolder;
            height: 60px;
            line-height: 60px;
            width: 235px;
            padding-left: 21px;
            color: #fff;
            background-color: #009688;
        }

        .el-header {
            display: flex;
            justify-content: space-between;
            z-index: 999;
            background: #009688;
            .title {
                font-size: 25px;
                font-weight: bolder;
                height: 60px;
                line-height: 60px;
                padding-left: 21px;
                color: #fff;
            }
            .el-tabs__header {
                background-color: #fff
            }

            .userInfo {
                padding-top: 15px;
                padding-right: 20px;

                .el-avatar {
                    margin-right: 15px;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                }

                .el-dropdown {
                    top: -10px;
                    font-size: 15px;
                    color: #fff;
                }
            }

            .el-dropdown-link {
                cursor: pointer;
            }

            .el-icon-arrow-down {
                font-size: 12px;
            }

            .isCollapse {
                cursor: pointer;
                font-size: 25px;
                line-height: 60px;
                color: #fff;
            }
        }

        .el-main {
            padding: 0;
            background-color: #f4f6f8;
            overflow-x: hidden
        }
    }

    .main-enter,
    .main-leave-active {
        position: absolute;
        opacity: 0;
    }

    .main-entere-active,
    .main-leave-active {
        transition: opacity 0.1s linear;
    }
</style>
